import React, { useState, useEffect } from 'react'
import style from "./Favorite.module.css";
function Favorite(props: any) {
    const { favoriterimg } = props
    const [leftflag, setLeftFlag] = useState(false)
    const [rightflag, setRightFlag] = useState(true)

    const [currentStyle, setCurrenStyle] = useState({
        width: '3100px',
        height: "100%",
        display: "flex",
        alignItems: 'center',
        position: "absolute",
        // background: '#fcc',
        transition: "left 0.3s linear",
        top: '0',
        left: "0"
    })
    //向左移动的偏移量
    const [leftPosition, setLeftPosition] = useState(0);

    //左点
    const toright = () => {
        setLeftPosition(prev => prev + 900);
    }
    //右点
    const toleft = () => {
        setLeftPosition(prev => prev - 900);
        setLeftFlag(true)
    }

    useEffect(() => {
        setCurrenStyle(pre => ({
            ...pre,
            left: `${leftPosition}px`
        }))
        if (leftPosition <= -1400) {
            setRightFlag(false)
            setLeftFlag(true)
        }
        else if (leftPosition >= 0) {
            setRightFlag(true)
            setLeftFlag(false)
        }
    }, [leftPosition])

    return (
        <div className={style.box}>
            <div className={style.main}>
                <ul style={currentStyle}>
                    {
                        favoriterimg.map((item:any, index:number) => {
                            return <li className={style.li} key={index}>
                                <div className={style.picture}>
                                    <img src={item.img} alt="" />
                                </div>
                                <div>
                                    <div>{item.title}</div>
                                    <div className={style.size}>{item.size}</div>
                                </div>
                            </li>
                        })
                    }
                </ul>
                {
                    leftflag ? <i className={style.zuo1} onClick={toright}>&lt; </i> : ''
                }
                {
                    rightflag ? <i className={style.you1} onClick={toleft}> &gt;</i> : ''
                }
            </div>
        </div>
    )
}

export default Favorite
